<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Dojo Slider Widget Demo</title>

		<style type="text/css">
			@import "../../../themes/claro/document.css";
			@import "../../css/dijitTests.css";
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="async: true, isDebug: true, parseOnLoad: true, has: { 'dojo-bidi': true }"></script>

		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/dom",
				"dojo/number",
				"dojo/parser",
				"dojo/query",
				"dijit/registry",
				"dijit/form/VerticalSlider",
				"dijit/form/VerticalRule",
				"dijit/form/VerticalRuleLabels",
				"dojo/domReady!"
			], function(doh, dom, number, parser, query, registry, VerticalSlider, VerticalRule, VerticalRuleLabels){


				doh.register("setup", [
					function parse(){
						return parser.parse();
					},
					function programmatic(){
						// programmatic vertical slider and labels
						var node;
						// setup the rules
						var sliderRules = new VerticalRule({
							count:11,
							style:{width:"5px"}
						});

						// setup RuleLabels
						var sliderRuleLabels = new VerticalRuleLabels({
							labels: ["תגlowest!","low!", "mid!", "high!","תגhighest!"],
							textDir: "ltr",
							id: "rulerLabels2"
						});

						// and setup the slider
						var sliderProps = {
							value:1400,
							name:"programmaticSlider",
							slideDuration:0,
							onChange:function(val){ dom.byId('sliderProgInput').value=val; },
							style:{height:"165px"},
							minimum:1000,
							maximum:3000,
							discreteValues:11,
							intermediateChanges:"true",
							showButtons:"true"
						};

						sliderProps.id = sliderProps.name = "programmaticSliderNoSrc";

						var theSlider = new VerticalSlider(sliderProps, node);
						node = theSlider.containerNode;
						theSlider.placeAt("form1");
						sliderRules.placeAt(node);
						sliderRuleLabels.placeAt(node);

						// and start them all
						theSlider.startup();
						sliderRules.startup();
						sliderRuleLabels.startup();

						//attach handler to Horizontal ruler
						var slider1 = registry.byId("slider1");
						slider1.watch("value", function(name, oldVal, newVal){
							dom.byId("slider1input").value = number.format(newVal/100,{places:1,pattern:"#%"});
						});
					}
				]);

				doh.register("tests._BidiSupport.form.RulerLabelBidi", [
					{
						name: "Slider Bidi",
						runTest: function(){
							query(" > div",dom.byId('rulerLabels1')).forEach(function(node, index, arr){
								doh.is("rtl", node.style.direction, "hoprizontal: label node had 'direction' style corresponding to 'textDir'");
							});
							registry.byId("rulerLabels2").set('textDir',"auto");
							var verticalLabel = query("div.dijitRuleLabelContainerV")[0];
							doh.is("rtl", verticalLabel.style.direction, "vertical: label node had 'direction' style corresponding to 'textDir'");
						}
					}
				]);

				doh.register("log", function(){
					dom.byId('failures').innerHTML = doh._failureCount;
					dom.byId('errors').innerHTML = doh._errorCount;
				});

				doh.run();
			});
		</script>
	</head>

	<body class="claro">
		<h1 class="testTitle">Slider</h1>
		Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
		<br>
		<!--    to test form submission, you'll need to create an action handler similar to
			http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
		<form id="form1" action="" name="example" method="post">
		<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
		<strong>Horizontal Slider Example, "rtl" base text direction</strong>
		<br>
		<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal1",
			value:10,
			maximum:100,
			minimum:0,
			pageIncrement:100,
			showButtons:true,
			intermediateChanges:true,
			slideDuration:500,
			style:{width:"50%", height:"20px"}
			' >
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
				<ol id="rulerLabels1" data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='textDir:"rtl", container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
					<li>תגlowest!</li>
					<li>תגnormal!</li>
					<li>תגhighest!</li>
				</ol>
		</div>
		Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"/>
		<br>
		<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
		<h1>Fancy HTML labels (no slide animation), "rtl" base text direction:</h1>
		<div id="slider3" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal2",
			title:"Fancy HTML Labels",
			minimum:1,
			value:2,
			maximum:3,
			discreteValues:3,
			showButtons:false,
			intermediateChanges:true,
			slideDuration:0,
			style:"width:300px; height: 30px;"
			'>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:3, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='textDir:"rtl", container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li><img width=10 height=10 src="../../images/note.gif"/><br><span style="font-size: small">תגsmall!</span></li>
					<li><img width=15 height=15 src="../../images/note.gif"/><br><span style="font-size: small">תגmedium!</span></li>
					<li><img width=20 height=20 src="../../images/note.gif"/><br><span style="font-size: small">תגlarge!</span></li>
				</ol>
		</div>
		<br><br>
		<h2>Completely programmatic VerticalSlider and VerticalRule, "auto" base text direction</h2>
		<h3>min:1000, max:3000, 11 discrete values, no animation</h3>

		<div id="programmaticSlider"></div>
		Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400"/>
		</form>
		<br>Errors:&nbsp;<span id="errors">?</span>
		<br>Failures:&nbsp;<span id="failures">?</span>
	</body>
</html>
